<!DOCTYPE html>
<html style="font-size:62.5%">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>欢瑞世纪影视传媒</title>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/>
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/animate.min.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/public.css">
  <script src="js/swiper.min.js"></script>
  <script src="js/swiper.animate.min.js"></script>
  <script src="js/public.js"></script>
</head>

<body style="">
<div class="swiper-container">

  <div class="swiper-wrapper">
    <!-------------slide1----------------->
    <div class="swiper-slide swiper-slide1">
      <div class="img-bg" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%"><img src="images/company.jpeg" alt="" style="width:100%;opacity: .1"></div>
      <!--头部和尾部-->
      <img src="images/begin_round@3x.png" class="ani resize" style="width:2.8rem;height:4.2rem;left:0px;top:-1.8rem;z-index:3;" swiper-animate-effect="slideInLeft" swiper-animate-duration=".5s" swiper-animate-delay="0.5s"  >
      <img src="images/begin_point_up@3x.png" class="ani resize" style="width:13.2rem;height:2.2rem;left:2.2rem;top:.8rem;z-index:2;" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0"  >
      <img src="images/begin_point_down@3x.png"  class="ani resize" style="width:11rem;height:2.2rem;left:.5rem;bottom: .6rem;z-index:1;" swiper-animate-effect="slideInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0"  >
      <img src="images/begin_biground@3x.png"  class="ani resize" style="width:5rem;height:4.8rem;right: 0;bottom: 0;z-index:1;" swiper-animate-effect="slideInRight" swiper-animate-duration="0.5s" swiper-animate-delay=".5s"  >

      <!--中间-->
      <img src="images/begin_triangle@3x.png"  class="ani resize" alt="" style="width: 14.8rem;height: 12rem;left: .6rem;top: 6.8rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay=".5s" >
      <img src="images/iPhone%207@3x.png"  class="ani resize" alt="" style="width: 100%;height: 13rem;left: 0;top: 6.8rem;"  swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" >
      <p class="b-txt ani resize" style="width:12.2rem;left: 1.9rem;top: 9.2rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s" >欢瑞世纪</p>
      <p class="s-txt ani resize" style="width:9rem;left:3.5rem;top: 12.6rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1.5s" >影视传媒</p>
      <div class="about-us-btn about-txt ani resize" style="width:6rem;height:2.4rem;left: 5rem;top: 18rem;" swiper-animate-effect=" fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.5s">
       <a href="people.html" style="color: #fff;">
       <span class="resize" id="about-us" style="font-size: .75rem;">认识我们 </span>
        <img src="images/arrow.png" style="width:.6rem;height:.6rem; top:.8rem; right:1rem;" id="array-left">
        	</a>
      </div>
      <div class="ani b-yuan" style="width: 4.6rem;height: 4.6rem; border-radius: 50%;left: 50%;margin-left:-2.3rem;top: 4.5rem;"  swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="1s" >
        <img src="images/logo-b.png" alt="" style="width: 100%;height: 100%">
      </div>
    </div>
  </div>
</div>
<script>


  var mySwiper = new Swiper ('.swiper-container', {
    direction : 'vertical',
    mousewheelControl : true,
    onInit: function(swiper){
      swiperAnimateCache(swiper);
      swiperAnimate(swiper);
    },
    onSlideChangeEnd: function(swiper){
      swiperAnimate(swiper);
    },
    onTransitionEnd: function(swiper){
      swiperAnimate(swiper);
    }

  })
</script>
</body>
</html>
